<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/manage/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>代理商</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <el-table
        :data="agentList"
        style="width: 100%;margin-top: 10px;"
        :stripe="true"
        size="mini">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="姓名">
          <template slot-scope="scope">
            <div class="img_table"><img :src="scope.row.profilePhotoPath" alt="" width="40" height="40"></div>
            <p style="line-height: 40px;margin-left: 10px;float: left;">{{scope.row.nickname}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="realName"
          label="真实姓名">
        </el-table-column>
        <el-table-column
          width="60"
          label="性别">
          <template slot-scope="scope">
            <span>{{scope.row.sex === 1 ? '男' : '女'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="findBranch(scope.row.id)">查看代理用户</el-button>
            <el-button size="mini" type="danger" @click="delAgent(scope.row.id)">解除代理商</el-button>
            <el-popover
              placement="top"
              width="180"
              trigger="click">
              <el-input v-model="scope.row.agentRewardPoint" size="mini" placeholder="设置扣点数（单位千分）"/>
              <div style="text-align: right; margin: 10px 0 0">
                <el-button size="mini" type="text" @click="bodyClick">取消</el-button>
                <el-button type="primary" size="mini" @click="setAgent(scope.row.id, scope.row.agentRewardPoint)">确定</el-button>
              </div>
              <el-button slot="reference" size="mini" type="primary" style="margin-left: 10px;">设置扣点</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="代理客户" :visible.sync="showBranch">
      <el-table :data="branchData" size="mini">
        <el-table-column label="公众号" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.logoImagePath" alt="" width="30" style="float: left;">
            <span style="line-height: 30px;">{{ scope.row.nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column property="brandName" label="分体名字" width="200"/>
        <el-table-column property="address" label="所在地">
          <template slot-scope="scope">
            <span>{{ scope.row.province }} {{ scope.row.city }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'agent',
  data () {
    return {
      url: {
        list: '/branch/agent/list',
        cancel: '/agent/cancel',
        agentSet: '/agent/admin/reward/point/update',
        branchList: '/agent/admin/invite/branch/list'
      },
      agentList: [],
      showBranch: false,
      branchData: []
    }
  },
  methods: {
    getAgentList () {
      this.$ajax.post(this.url.list).then(res => {
        if (res.data.success) {
          this.agentList = res.data.data
        }
      })
    },
    delAgent (id) {
      this.$confirm('是否取消代理商?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$ajax.post(this.url.cancel, id).then(res => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getAgentList()
          }
        })
      })
    },
    bodyClick () {
      document.body.click()
    },
    setAgent (id, point) {
      let params = {
        agentId: id,
        rewardPoint: parseInt(point)
      }
      this.$ajax.post(this.url.agentSet, JSON.stringify(params)).then(res => {
        if (res.data.success) {
          this.$message.success('设置成功')
          this.getAgentList()
          this.bodyClick()
        }
      })
    },
    findBranch (id) {
      this.$ajax.post(this.url.branchList, id)
        .then(res => {
          if (res.data.success) {
            this.branchData = res.data.data.list
            this.showBranch = true
          }
        })
    }
  },
  created () {
    this.getAgentList()
  }
}
</script>

<style scoped>
  .img_table{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    overflow: hidden;
    float: left;
  }
</style>
